<template>
  <div class="login">
    <div class="login-box">
      <div class="login-box-left">
        <img src="../assets/login_img.svg" alt="">
      </div>
      <div class="login-box-right">
        <el-tabs v-model="activeName" class="demo-tabs" stretch="true">
          <el-tab-pane label="登录" name="login">
            <el-form ref="ruleFormRefOnLogin" :model="sysUser" :rules="rulesOnLogin" style="text-align: center">
              <h2>小航医院管理系统</h2>
              <el-form-item label="账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:" prop="account">
                <el-input type="text" placeholder="请输入账号" v-model="sysUser.account"></el-input>
              </el-form-item>
              <el-form-item label="密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:" prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="sysUser.password"></el-input>
              </el-form-item>
              <el-form-item label="验&nbsp;&nbsp;证&nbsp;&nbsp;码:" prop="code">
                <el-input type="text" placeholder="请输入验证码" v-model="sysUser.code">

                  <template #append>
                    <img :src="codeImg" @click="getCodeImg" class="codeImg" alt="">
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item class="rememberMe">
                <el-checkbox v-model="sysUser.rememberMe">记住我</el-checkbox>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="loginSubmit(ruleFormRefOnLogin)" style="width: 100%">登录</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="注册" name="register">
            <el-form ref="ruleFormRefOnRegister" :model="registerUser" :rules="rulesOnRegister" style="text-align: center">
              <h2>小航医院管理系统</h2>
              <el-form-item label="账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:" prop="account">
                <el-input type="text" placeholder="请输入账户" v-model="registerUser.account"></el-input>
              </el-form-item>
              <el-form-item label="密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:" prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="registerUser.password"></el-input>
              </el-form-item>
              <el-form-item label="确认密码:" prop="confirmPassword">
                <el-input type="password" placeholder="请输入确认密码"
                          v-model="registerUser.confirmPassword"></el-input>
              </el-form-item>
              <el-form-item label="验&nbsp;&nbsp;证&nbsp;&nbsp;码:" prop="code">
                <el-input type="text" placeholder="请输入验证码" v-model="registerUser.code">
                  <template #append>
                    <img :src="codeImg" @click="getCodeImg" class="codeImg" alt="">
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="registerSubmit(ruleFormRefOnRegister)" style="width: 100%">注册</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="login-box-bottom">
        <!--        版权信息-->
        <div class="copyright">
          <div class="copyright-left">
          </div>
          <div class="copyright-right">
            <p>Copyright © 2021-2022 小航医院管理系统 版权所有</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref, getCurrentInstance} from "vue";
import {ElMessage, type FormInstance, type FormRules} from "element-plus";
//路由对象
import {useRouter} from "vue-router";
const Router = useRouter();
import qs from "qs"
import httpInstance from "@/axios";

const activeName = ref('login')

//登录用户存放
const sysUser = ref({
  account: '',
  password: '',
  code: '',
  rememberMe: false
})

//注册用户存放
const registerUser = ref({
  account: '',
  password: '',
  //确认密码
  confirmPassword: '',
  code: ''
})

//获取验证码
const getCodeImg = () => {
  httpInstance.get('/auth/getCode')
      .then((response: any) => {
        codeImg.value = "data:image/png;base64," + response.data.codeImg
      })
      .catch((error: any) => {
        console.log(error)
      })
}

//验证码
const codeImg = ref('')

const ruleFormRefOnLogin = ref<FormInstance>()
const ruleFormRefOnRegister = ref<FormInstance>()

interface RuleFormOnLogin {
  account: string
  password: string
  code: string
}

interface RuleFormOnRegister {
  account: string
  password: string
  code: string
  confirmPassword: string
}

const rulesOnLogin = reactive<FormRules<RuleFormOnLogin>>({
  account: [
    {required: true, message: '请输入账户账号', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入账户密码', trigger: 'blur'},
  ],
  code: [
    {required: true, message: '请输入验证码', trigger: 'blur'},
  ]
})

const rulesOnRegister = reactive<FormRules<RuleFormOnRegister>>({
  account: [
    {required: true, message: '请输入账户账号', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '请输入账户密码', trigger: 'blur'},
  ],
  code: [
    {required: true, message: '请输入验证码', trigger: 'blur'},
  ],
  confirmPassword: [
    {required: true, message: '请输入确认密码', trigger: 'blur'}
  ],
})

//初始化
onMounted(() => {
  document.documentElement.classList.value = ''
  if (localStorage.getItem('account') !== null) {
    sysUser.value.account = localStorage.getItem('account') as string
  }
  if (localStorage.getItem('password') !== null) {
    sysUser.value.password = localStorage.getItem('password') as string
  }
  if (localStorage.getItem('rememberMe') === 'true') {
    sysUser.value.rememberMe = true
  }
})
onMounted(getCodeImg)


const loginSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      httpInstance.post('/auth/login', qs.stringify(sysUser.value))
          .then((response: any) => {
            console.log(response);
            if (response.code === 200) {
              if (sysUser.value.rememberMe) {
                localStorage.setItem('account', sysUser.value.account)
                localStorage.setItem('password', sysUser.value.password)
                localStorage.setItem('rememberMe', 'true')
              } else {
                localStorage.removeItem('account')
                localStorage.removeItem('password')
                localStorage.removeItem('rememberMe')
              }
              //把token保存
              localStorage.setItem('Authorization', response.data.token)
              //跳转到首页
              Router.push('/home')
            }else{
              //清空验证码
              sysUser.value.code = ''
              getCodeImg()
            }
          })
          .catch((error: any) => {
            console.log(error);
          });
    } else {
      ElMessage.error('请检查用户名密码是否填写')
    }
  })
}

const registerSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      ElMessage.success('骗你哒~后台系统用不到注册~')
    } else {
      console.log('提交失败，检查信息是否填写完毕', fields)
    }
  })
}
</script>

<style scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: rgba(103, 175, 207, 0.73);
}

.login-box {
  display: flex;
  overflow: hidden;
  width: 60%;
  min-width: 700px;
  height: auto;
  min-height: 400px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
  padding: 10px;
}

.login-box-left {
  overflow: hidden;
  width: 50%;
}

.login-box-left img {
  width: 100%;
  height: 100%;
}

.login-box-right {
  overflow: hidden;
  width: 50%;
  height: 90%;
}

.el-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  height: 100%;
}

.el-form h2 {
  margin: 15% 0 10% 0;
}

.el-form-item {
  width: 100%;
  margin-bottom: 20px;
}

.el-form-item__content img {
  width: 60px;
  height: 37px;
}

.el-form-item .rememberMe {
  display: flex;
}

.el-tab-pane {
  display: flex;
  justify-content: center;
}

.login-box-bottom {
  display: flex;
  height: 10%;
  align-items: center;
  width: 100%;
  justify-content: center;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.5);
}
</style>